<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/layer-css.css"/>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }
        .layui-btn {
            width: 100px;
            font-size: 18px;
            border-radius: 5px;
        }

    </style>
</head>
<body class="pear-container">
<div class="layui-row manualControl layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        系统配置
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row layui-col-space5" style="margin-top: 24px;margin-bottom: 12px">
                    <form class="layui-form" action="" onsubmit="return false">
                        <div class="layui-form-item">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sysType" value="1" title="智能密集架" th:checked="${sysType eq '1'}">
                                <input type="radio" name="sysType" value="2" title="地图柜" th:checked="${sysType eq '2'}">
                                <input type="radio" name="sysType" value="3" title="rfid密集架" th:checked="${sysType eq '3'}">
                                <input type="radio" name="sysType" value="4" title="手动密集架" th:checked="${sysType eq '4'}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="sysTypeSave">保存</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row manualControl layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        载体配置
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row layui-col-space5" style="margin-bottom: 12px">
                    <table id="hostTable" lay-filter="hostTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script type="text/html" id="notice-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">修改</button>
</script>

<script type="text/html" id="carrier-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>
<script type="text/html" id="host-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">修改</button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">删除</button>
</script>
<script>
    layui.use(['form', 'jquery', 'loading','table'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let table = layui.table;

        form.on('submit(sysTypeSave)', function (data) {
            let loading = layer.load();
            $.ajax({
                url: '/sys/paramset/systype/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });


        let cols = [
            [
                {title: '载体名称', field: 'cabinet_name', align: 'center'},
                {title: '区号', field: 'cabinet_number', align: 'center',templet: function (d) {
                        return '<span style="color: #40bb9c ;">' + d.cabinet_number + '区</span>';
                    }
                },
                {title: 'ip地址', field: 'ip', align: 'center', width: 120},
                {
                    title: '机柜状态', field: 'online_status', align: 'center', templet: function (d) {
                        if (d.online_status === 0) {
                            return '<span style="color: #FF9200 ;">离线</span>';
                        } else if (d.online_status === 1) {
                            return '<span style="color: #398FFF;">在线</span>';
                        }

                    }
                },
                {title: '架体列数', field: 'column_number', align: 'center'},
                {title: '节数', field: 'cabinet_joint', align: 'center'},
                {title: '层数', field: 'cabinet_layer', align: 'center'},
                {title: 'rfid数量', field: 'rfid_number', align: 'center'},
                {title: '创建日期', field: 'create_time', align: 'center', width: 160},
                {title: '操作', toolbar: '#host-bar', align: 'center', width: 220}
            ]
        ]
        tableIns = table.render({
            elem: '#hostTable',
            url: '/host/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#carrier-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            id: 'hostTable',
            //解决页码的问题
            done: function (res) {
                // 获得当前页码
                var brforeCurr = tableIns.config.page.curr;
                // 获得当前页的记录数
                var dataLength = table.cache['hostTable'].length;
                var count = res.count; // 获得总记录数
                //如果当前页的记录数为0并且总记录数不为0
                if (dataLength === 0 && count !== 0) {
                    // 刷新表格到上一页
                    table.reload("hostTable", {
                        page: {
                            curr: brforeCurr - 1
                        }
                    });
                }
            }
        });


        table.on('toolbar(hostTable)', function (obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }else if (obj.event === 'add') {
                window.add();
            }
        });

        window.add = function () {
            parent.layer.open({
                title: ['新增密集架', 'font-size: 18px;'],
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['40%', '100%'],
                shade: 0.5,
                maxmin: true,
                id: 'addNewEquipment',
                content: '/host/denseRack/add',
                move: false,
                end: function () {
                    table.reload('hostTable');
                }
            });
        }

        window.refresh = function (param) {
            table.reload('hostTable');
        }

        table.on('tool(hostTable)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        window.edit = function (obj) {
            parent.layer.open({
                title: ['修改 <span style="color: #ff5722;">' + obj.data.cabinet_name + '</span> 设备', 'font-size: 16px;'],
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['40%', '100%'],
                shade: 0.5,
                maxmin: true,
                id: 'addNewEquipment',
                content: '/host/denseRack/update/' + obj.data['id'],
                move: false,
                end: function () {
                    table.reload('hostTable');
                }
            });
        }

        window.remove = function (obj) {
            layer.confirm('<div>确定要删除&nbsp;&nbsp;<span style="color: #FF9200;">' + obj.data.cabinet_name +
                '</span>&nbsp;&nbsp;设备吗?</div>', {
                icon: 3,
                title: ['删除确认', 'font-size: 18px;'],
                shade: 0.5,
                area: ['499px', '303px'],
                move: false,
                id: "borrowingConfirm"
            }, function (index) {
                layer.close(index);
                $.ajax({
                    url: '/host/delete/host/' + obj.data.id,
                    dataType: 'json',
                    type: 'delete',
                    contentType: 'application/json',
                    success: function (result) {
                        if (result.code === 200) {
                            layer.msg(result.message, {icon: 1, time: 1800}, function () {
                                obj.del();
                                table.reload('hostTable');
                            });
                        } else {
                            layer.msg(result.message, {icon: 2, time: 1800});
                        }
                    }
                })
            });
        }
    });
</script>
</body>
</html>